import React, { FC } from 'react'
import { InputProps, DISPLAY_NAME_INPUT, getInputClassNames } from './config'
import Icon from '../Icon'

export const Input: FC<InputProps> = props => {
  const {
    prepend,
    append,
    icon,
    className,
    disabled,
    size,
    comRef,
    ...restProps
  } = props
  const inputClasses = getInputClassNames(props)

  if ('value' in props) {
    delete restProps.defaultValue
    restProps.value || (restProps.value = '')
  }

  return (
    <div className={inputClasses}>
      {prepend && <div className="input-group-prepend">{prepend}</div>}
      {icon && (
        <div className="icon-wrapper">
          <Icon icon={icon}></Icon>
        </div>
      )}
      <input
        className="input-inner"
        disabled={disabled}
        ref={comRef}
        {...restProps}
      />
      {append && <div className="input-group-append">{append}</div>}
    </div>
  )
}
Input.displayName = DISPLAY_NAME_INPUT

export default Input
